<template>
  <div class="page-login">
    <h1 class="login-title">华农圈</h1>
    <van-form style="width: 100%" @submit="login">
      <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-form>
    <div class="newOrForget">
      <span style="margin-left: 5px" @click="$router.push('/register')">新用户注册</span>
      <div class="loginForYB">
        <span @click="$router.push('/forgetpwd')">忘记密码</span>
        <!--        "-->
        <a style="color: dodgerblue" href="http://120.24.218.54:8080/yibancircle">从易班登录</a>
      </div>
    </div>
    <van-button @click="login" plain :loading="isLoading" class="submitBtn" type="info" native-type="submit">登录
    </van-button>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: "Login",
  data() {
    return {
      email: '',
      password: '',
      isLoading: false
    }
  },
  created() {
    if (this.$route.query.flag) {
      console.log(this.$route.query);
      this.yibanLogin();
    }
  },
  methods: {
    login() {
      //开始登录
      this.isLoading = true;
      new Promise((resolve, reject) => {
        return axios.post('/yibancircle/loginEmail', {
          email: this.email,
          password: this.password
        }).then(res => {
          if (res.result === null) {
            return reject(res);
          }
          let result = res.result;
          if (res.result.ybUserHead !== null || res.result.userHead == '' || res.result.userHead == null) {
            res.result.userHead = res.result.ybUserHead;
          }
          this.$store.commit('isLogin', true);
          //缓存登录信息
          localStorage.setItem('loginInfo', JSON.stringify(result));
          localStorage.setItem('isLogin', 'true');
          return resolve(result);
        })
      }).then(res => {
        return new Promise(resolve => {
          this.request().then(res => {
            resolve();
          });
        })
      }).then(res => {
        console.log('login ok');
        this.$store.commit("isLogin", true);
        this.loginSuccess();
        this.isLoading = false;
      }).catch(err => {
        console.log(err)
        _g.showMsg('danger', err.msg);
      })
    },
    loginSuccess() {
      Toast.success('登录成功');
      this.$router.push('/index/home');
    },
    getProfileMenu() {
      let roleId = JSON.parse(localStorage.getItem('loginInfo')).roleId;
      roleId = roleId ? 3 : roleId;
      return axios.get('/common/getMenu', {
        roleId: roleId
      })
    },
    getCircleType() {
      return axios.get('/type/getType');
    },
    getUnRead() {
      return axios.get('/common/getUnread');
    },
    request() {
      return axios.all([this.getProfileMenu(), this.getCircleType(), this.getUnRead()])
          .then(axios.spread((profileMenu, allCircleType, unread) => {
            localStorage.setItem('menu', JSON.stringify(profileMenu.result));
            localStorage.setItem('circleType', JSON.stringify(allCircleType.result));
            localStorage.setItem('unread', JSON.stringify(unread.result));
          }));
    },
    yibanLogin() {
      new Promise((resolve, reject) => {
        return axios.get('/yibancircle/getUser').then(res => {
          // let newBlank = window.open('about:blank','_blank');
          let result = res.result;
          if (res.result.ybUserHead !== null || res.result.userHead == '' || res.result.userHead == null) {
            res.result.userHead = res.result.ybUserHead;
          }
          this.$store.commit('isLogin', true);
          //缓存登录信息
          localStorage.setItem('loginInfo', JSON.stringify(result));
          localStorage.setItem('isLogin', 'true');
          return resolve(result);
        }).then(res => {
          return new Promise(resolve => {
            this.request().then(res => {
              resolve();
            });
          })
        }).then(res => {
          console.log('login ok');
          this.$store.commit("isLogin", true);
          this.loginSuccess();
          this.isLoading = false;
        }).catch(err => {
          console.log(err)
          _g.showMsg('danger', err.msg);
        })
      })
    }
  }
}
</script>

<style scoped>
.page-login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  margin: 60% auto;
}

.login-title {
  color: #2f2f2f;
  margin-bottom: 30px;
}

.submitBtn {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

.newOrForget {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: dodgerblue;
}

.loginForYB {
  margin-right: 5px;
}

.loginForYB > span {
  margin-right: 5px;
}
</style>
